這在好幾章以前有提過，我希望能透過增加不同的分頁使每個練習分門別類，當然，要完成的作品也是。

但拜讀了一些文章，似乎是只要從 jS 下手去操作，不需要觸碰 index.html ( 感覺很新奇！ ）。

我參考了這篇文章的上下篇：

【React.js入門 - 27】 我要更多更多的分頁 - react-router-dom (上)

終於完成分頁且製作出選單，其中踩了不少錯，主要是名稱我亂取的關係，若遇到檔名已經改掉還是有問題的狀況，建議重新開啟終端機跑專案就行了。

製作完分頁，再來就會想到要製作選單了吧！

我們來到上一章有提到的 React Bootstrap

依照順序安裝。

然後再已經分好的頁面中放上 offcanvas ，我的切法如下

Layout.js

import React, {useState} from "react";
import {Offcanvas} from 'react-bootstrap'
import {Link} from 'react-router-dom';
import {Button} from 'react-bootstrap';
const Layout=(props)=>{

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return(
  
    <div>
    <Button variant="primary" onClick={handleShow} className="me-2" placement="start">
    Menu
    </Button>
    <Offcanvas show={show} onHide={handleClose} {...props}>
      <Offcanvas.Header closeButton>
        <Offcanvas.Title></Offcanvas.Title>
      </Offcanvas.Header>
      <Offcanvas.Body>
        <nav>
          <Link to="/">Index</Link><br />
          <Link to="/HelpMe" >Help Me</Link>
        </nav> 
        {props.children}
      </Offcanvas.Body>
    </Offcanvas>
    </div>
  );
}
export default Layout;

App.js

import React from 'react';
import {HashRouter,Route,Switch} from "react-router-dom";

import HelpMe from "./HelpMe";
import Layout from "./Layout";

import './App.css';

const App=()=>{
    return( 
      <HashRouter>
        <Switch>
            <Layout>
                <Route exact path="/"/>
                <Route path="/HelpMe" component={HelpMe}/>
            </Layout>
        </Switch>

        </HashRouter>
    );
}
export default App;

以上很感謝布魯斯前端的各位好友協助！

因為我用 CDN 的方式載入，跟官網的版本有些落差，請務必照著官網步驟走呀 >"<|||。

搭啦～不太好看的選單～＊ 不過還是很開心～，終於成功了～＊

但是出現一件很詭異的事情，應該是我學藝不精，東西都跑到選單下面啦...

所以我找了這個網站練習，希望這個問題可以解決ＱＱ

REACT TRAINING / REACT ROUTER